<template>
  <div class="">
    <div class="search-bar">
      <van-row class="text-row">
        <van-col span="4">
          <img class="loc-img" :src="locationIcon" width="55%" />
        </van-col>
        <van-col span="16">
          <input class="search-input" type="text" name="">
        </van-col>
        <van-col span="4">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- swiper area -->
    <div class="swiper-area">
      <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner, goodsId) in bannerPicArray" :key="goodsId">
          <img v-lazy="banner.image" width="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- type area -->
    <div class="type-area">
      <div class="type-bar">
        <div class="cate-imgs" v-for="(cate,index) in category" :key="index">
          <img class="cate-img" v-lazy="cate.image"/>
          <span class="cate-txt">{{cate.mallCategoryName}}</span>
        </div>
      </div>
    </div>
    <!-- adBanner area -->
    <div>
      <img v-lazy="adBanner" width="100%">
    </div>
    <!-- recommand area -->
    <div class="reco-area">
      <div class="reco-title">
        商品推荐
      </div>
      <div class="reco-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item, goodsId) of recoGoods" :key="goodsId">
            <div class="reco-item">
              <img v-lazy="item.image" width="80%">
              <div>{{item.goodsName}}</div>
              <div>￥{{item.price}}(￥{{item.mallPrice}})</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- v-swiper测试 -->
    <swiper-d></swiper-d>
    <swiper-d2></swiper-d2>
    <swiper-d3></swiper-d3>
  </div>
</template>

<script>
import axios from 'axios'
import 'swiper/dist/css/swiper.css' // 引入vue-awesome-swiper
import {swiper, swiperSlide} from 'vue-awesome-swiper'

//引入自定义v-a-swiper组件
import swiperD from '../swiper/swiperDefault'
import swiperD2 from '../swiper/swiperDefault2'
import swiperD3 from '../swiper/swiperDefault3'

export default {
  name: '',
  data () {
    return {
      locationIcon: require('../../assets/images/location.png'),
      bannerPicArray:[],
      category: [],
      // 广告条
      adBanner: '',
      recoGoods: [],
      swiperOption: {
        slidesPerView: 3
      }
    }
  },
  components:{
    swiper,
    swiperSlide,
    swiperD,
    swiperD2,
    swiperD3
  },
  // 生命周期
  created () {
    axios({
      url: 'https://www.easy-mock.com/mock/5cfde311a9dc00683e60f4f2/smileVue/index',
      method: 'get',
    })
    .then(res => {
      console.log(res)
      //判断请求成功
      if (res.status == 200) {
        this.category = res.data.data.category
        this.adBanner = res.data.data.advertesPicture.PICTURE_ADDRESS
        this.bannerPicArray = res.data.data.slides
        this.recoGoods = res.data.data.recommend
      }
    })
    .catch(e => {
      console.log(e)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .search-bar
    height: 2.2rem
    background-color: #e5017d
    line-height: 2.2rem
    .loc-img
      padding-left: 0.2rem
      padding-top: 0.2rem
    .search-input
      width: 90%
      height: 1.3rem
      border:0px
      /*!important 冲掉默认值*/
      border-bottom: 1px solid white !important
      background-color: #e5017d
      color: white
  .swiper-area
    clear:both
    max-height: 12rem
    overflow: hidden
    height: 0
    padding-bottom: 45%
  .type-area
    overflow: hidden
    height: 0
    padding-bottom: 25%
    .type-bar
      background-color: white
      margin: 0.3rem .3rem .3rem .3rem
      border-radius: .3rem
      display: flex
      flex-direction: row
      justify-content: space-around
      flex-wrap: nowrap
      overflow: hidden
      height: 0
      padding-top: .3rem
      padding-bottom: 20%
      .cate-imgs
        // padding: .3rem
        height: 100%
        .cate-img
          width: 2.8rem
          margin-bottom: .2rem
        .cate-txt
          display: block
          text-align: center
  .reco-area
    background-color: #fff
    margin-top: .3rem
    .reco-title
      border-bottom:1px solid #eee
      font-size: 14px
      padding: .2rem
      color: #e5017d
    .reco-body
      border: 1px solid #eee
      // display: flex
      // flex-direction: row
      // flex-wrap: nowrap
    .reco-item
      width: 99%
      border: 1px solid #eee
      font-size: 12px
      text-align: center
</style>
vbase

